<script setup lang="ts">
import { ref, type Ref } from 'vue'
import * as questionAnswerApi from '@/api/questionAnswer'

import { message } from 'ant-design-vue'

const imgBox = ref()

const myModalRef = ref()
// 要预览的图片的地址
let previewImgScr = ref<string>('')

// 图片列表
const imgList: Ref<string[]> = ref([])

const uploadImg = async (e: Event) => {
  let input = e.target as HTMLInputElement
  if (input.files && input.files.length > 0) {
    let file = input.files[0]
    console.log('file=', file)

    // 前端 - 阿里云-oss
    // readFileAsBuffer(file).then(res => {
    //   upload(res as Buffer, file, 'replyAnswerImg').then((res: any) => {
    //     // console.log('res=', res)
    //     imgList.value.push(res?.url)
    //     emit('sendImgList', imgList.value)
    //   })
    // })

    // 后端模式
    try {
      let params = {
        img: file,
      }
      let { state, message: msg, data } = await questionAnswerApi.uploadToAliOss(params)
      if (state === 200) {
        // console.log('data=', data)
        imgList.value.push(data)
        emit('sendImgList', imgList.value)
      } else {
        message.error(msg)
      }
    } catch (error) {
      message.error('网络请求连接失败~')
    }
  }
}

const deleteImg = (index: number) => {
  imgList.value.splice(index, 1)
  emit('sendImgList', imgList.value)
}

// 开启预览
const openPreview = (src: string) => {
  previewImgScr.value = src
  myModalRef.value.showModal()
}

const { imgs } = defineProps<{ imgs: Array<string> }>()
watch(imgs, (newVal, oldVal) => {
  // console.log('newVal=', newVal)
  // console.log('oldVal=', oldVal)

  imgList.value.push(...newVal)
})


const emit = defineEmits<{
  sendImgList: [imgList: Array<string>]
}>()
</script>

<template>
  <!-- 图片列表 -->
  <div ref="imgBox" class="imgBox" v-for="(item, index) in imgList" style="position: relative">
    <img :src="item" :key="index" @click="openPreview(item)" />
    <div
      @click="deleteImg(index)"
      style="
        position: absolute;
        bottom: 105px;
        left: 100px;
        z-index: 2;
        width: 20px;
        height: 20px;
        cursor: pointer;
        color: red;
        font-size: 20px;
        font-weight: bolder;
      "
    >
      <div
        style="
          background: rgba(240, 242, 245, 0.8);
          width: 120px;
          height: 23px;
          position: absolute;
          left: -100px;
          top: 5px;
          z-index: -1;
        "
      ></div>
      <DeleteFilled />
    </div>
  </div>

  <!-- 上传按钮 -->
  <div class="file-upload" v-if="imgList.length < 2">
    <label class="label">选择图片</label>
    <span class="upload-button"></span>
    <input type="file" @change="uploadImg" accept="image/png,image/jpeg,image/gif" />
  </div>

  <!-- 预览 -->
  <MyModal title="预览" ref="myModalRef" :width="800">
    <template #content>
      <div style="height: 800px; width: 400px; margin: 0 auto">
        <img style="height: 100%; width: 100%" :src="previewImgScr" />
      </div>
    </template>
  </MyModal>
</template>

<style lang="less" scoped>
.imgBox {
  background: pink;
  // width: 120px;
  height: 120px;
  float: left;
  margin-right: 10px;

  img {
    width: 120px;
    height: 120px;
  }
}

.file-upload {
  position: relative;
  width: 120px;
  height: 120px;
  border: 1px solid #262626;
  display: flex;
  justify-content: space-between;

  // 关键
  float: left;
}

.label {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 76%;
}

.upload-button::before,
.upload-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  height: 1px;
  background-color: black;
  z-index: 10;
}

.upload-button::before {
  transform: translate(-50%, -50%);
}

.upload-button::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

input[type='file'] {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  opacity: 0;
}
</style>
